<template>
  <div class="user-management">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="用户列表" name="users">
        <div class="tab-content">
          <el-table :data="userList" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="department" label="部门" />
            <el-table-column prop="status" label="状态" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="roles">
        <div class="tab-content">
          <el-table :data="roleList" style="width: 100%">
            <el-table-column prop="name" label="角色名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="userCount" label="用户数" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" @click="handleEditRole(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDeleteRole(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="权限设置" name="permissions">
        <div class="tab-content">
          <el-form :model="permissionForm" label-width="120px">
            <el-form-item label="选择角色">
              <el-select v-model="permissionForm.role">
                <el-option
                  v-for="role in roleList"
                  :key="role.name"
                  :label="role.name"
                  :value="role.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="权限配置">
              <el-tree
                :data="permissionTree"
                show-checkbox
                node-key="id"
                :default-checked-keys="defaultCheckedKeys"
                :props="defaultProps"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePermissions">保存权限</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('users')
const userList = ref([
  {
    username: 'admin',
    role: '管理员',
    department: '系统管理部',
    status: '启用'
  }
])

const roleList = ref([
  {
    name: '管理员',
    description: '系统管理员',
    userCount: 1
  },
  {
    name: '操作员',
    description: '系统操作员',
    userCount: 2
  }
])

const permissionForm = ref({
  role: ''
})

const permissionTree = ref([
  {
    id: 1,
    label: '系统管理',
    children: [
      { id: 11, label: '用户管理' },
      { id: 12, label: '角色管理' },
      { id: 13, label: '权限管理' }
    ]
  },
  {
    id: 2,
    label: '业务管理',
    children: [
      { id: 21, label: '矿山管理' },
      { id: 22, label: '站点管理' },
      { id: 23, label: '设备管理' }
    ]
  }
])

const defaultCheckedKeys = ref([11, 21])
const defaultProps = {
  children: 'children',
  label: 'label'
}

const handleEdit = (row) => {
  console.log('编辑用户', row)
}

const handleDelete = (row) => {
  console.log('删除用户', row)
}

const handleEditRole = (row) => {
  console.log('编辑角色', row)
}

const handleDeleteRole = (row) => {
  console.log('删除角色', row)
}

const savePermissions = () => {
  console.log('保存权限', permissionForm.value)
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.tab-content {
  margin-top: 20px;
}
</style>
